<template>
	<view>
		<view class="map_container"> 
		  <map class="map" id="map" :longitude="longitude" :latitude="latitude" scale="14" show-location="true" :markers="markers" @markertap="makertap"></map> 
		</view> 
		<view class="rgc_info"> 
		  <text>{{rgcData.address}}</text> 
		  <text>{{rgcData.desc}}</text> 
		  <text>{{rgcData.business}}</text> 
		</view>
		<u-tabbar v-model="current" :list="list" :mid-button="true" :active-color="'red'"></u-tabbar>
	</view>
</template>

<script>
	// 引用百度地图微信小程序JSAPI模块 
	var bmap = require('../../libs/bmap-wx.min.js'); 
	var wxMarkerData = []; 
	// 地图对象的实例化
	const BMap = new bmap.BMapWX({
		ak: '7mi4eX2UICGWpc0t3IT8wagokrHD1WbS'
	});
	export default {
		data() {
			return {
				markers: [], 
				latitude: '', 
				longitude: '', 
				rgcData: {},
				list: [{
						iconPath: "home",
						selectedIconPath: "home-fill",
						text: '首页',
						count: 2,
						isDot: true,
						customIcon: false,
						pagePath: "/pages/index/index"
					},
					{
						iconPath: "photo",
						selectedIconPath: "photo-fill",
						text: '放映厅',
						customIcon: false,
						pagePath: "/pages/categorys/categorys"
					},
					{
						iconPath: "https://cdn.uviewui.com/uview/common/min_button.png",
						selectedIconPath: "https://cdn.uviewui.com/uview/common/min_button_select.png",
						text: '发布',
						midButton: true,
						customIcon: false,
						pagePath:'/pages/map/map'
					},
					{
						iconPath: "play-right",
						selectedIconPath: "play-right-fill",
						text: '直播',
						customIcon: false,
						pagePath: "/pages/show/show"
					},
					{
						iconPath: "account",
						selectedIconPath: "account-fill",
						text: '我的',
						count: 23,
						isDot: false,
						customIcon: false,
						pagePath: "/pages/personal/personal"
					},
				],
				current: 2,
			};
		},
		onLoad() {
			    BMap.regeocoding({
			      address: '湖北省武汉市江夏区东湖网谷',
			      fail: data=>{
					  console.log(data)
				  },
			      success: data=>{
					  wxMarkerData = data.wxMarkerData;
					  console.log('wxMarkerData',wxMarkerData);
					  this.markers= wxMarkerData
					  this.$set(this.markers[0],'title',this.markers[0].address)
						this.markers[0].width = 30;
						this.markers[0].height =30;
					  this.latitude=wxMarkerData[0].latitude
					  this.longitude=wxMarkerData[0].longitude
				  },
			      iconPath: '../../static/marker_red.png',
			      iconTapPath: '../../static/marker_red.png'
			    });
		},
		methods:{
			makertap(e) { 
					var id = e.markerId; 
					this.showSearchInfo(wxMarkerData, id); 
				}, 
			showSearchInfo(data, i) {
					this.rgcData={
							address: '地址：' + data[i].address + '\n',
							desc: '描述：' + data[i].desc + '\n',
							business: '商圈：' + data[i].business
						}
				}
		}
	}
</script>

<style lang="scss">
.map_container{ 
    height: 300px; 
    width: 100%; 
} 
  
.map { 
    height: 100%; 
    width: 100%; 
}
</style>
